<template>
  <div class="container">
      <a-page-header
       class="header"
        title="ids运行状态管理"
        sub-title="ids运行状态信息"
    />
    
    <!-- 主机ip -->
    <a-row>
      <a-space :size="20">
        <span class="title-text">Host:</span>
        <a-tag color="green">
          192.168.1.101
        </a-tag>
      </a-space>
    </a-row>
    <div style="dispaly:block;height:20px;width:100%"></div>
    <!-- 状态及操作按钮 -->
    <a-row>
       <a-space :size="200">
        <a-space :size="20">
          <span class="title-text">状态：</span> 
          <a-tag color="pink">
            pink
          </a-tag>          
        </a-space>
        <a-space :size="30">
          <a-button type="danger" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
            关闭
          </a-button>
          <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
            开启
          </a-button>
        </a-space>
       </a-space>
    </a-row>
    <div style="dispaly:block;height:20px;width:100%"></div>

    <a-row>
      <a-space :size="20">
        <span class="title-text">监控主机信息:</span>
        <a-tag color="green">
          192.168.1.101
        </a-tag>
      </a-space>
    </a-row>

    <div style="dispaly:block;height:20px;width:100%"></div>
    <!-- 详情 -->
    <a-row class="detail-panel">
      <p class="title-text">详情：</p>
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="8" class="grid-content">
          <a-card size="small" title="ids线程池工作状态" style="width: 400px">
            <a slot="extra" href="#">刷新</a>
            <p>card content</p>
            <p>card content</p>
            <p>card content</p>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card size="small" title="磁盘使用信息" style="width: 400px">
            <a slot="extra" href="#">刷新</a>
            <p>card content</p>
            <p>card content</p>
            <p>card content</p>
           </a-card>
        </a-col>
        <a-col :span="8">
           <a-card size="small" title="监控主机运行状态信息" style="width: 400px">
            <a slot="extra" href="#">刷新</a>
            <p>card content</p>
            <p>card content</p>
            <p>card content</p>
           </a-card>
        </a-col>
      </a-row>
       <div style="dispaly:block;height:20px;width:100%"></div>
       <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="8" class="grid-content">
          <a-card size="small" title="磁盘使用状态" style="width: 400px">
            <a slot="extra" href="#">刷新</a>
            <p>card content</p>
            <p>card content</p>
            <p>card content</p>
          </a-card>
        </a-col>
      </a-row>
         <div style="dispaly:block;height:20px;width:100%"></div>
    </a-row>

    <!-- <ContentCard v-for="(item, idx) in contents" :key="idx" :content_card_title="item.content_card_title" :content_card_items="item.content_card_items"/> -->
  </div>
</template>
<script >
import ContentCard from "@/components/content-card.vue"


export default {
  components:{
    // ContentCard,
  },
  data() {
    return {

    };
  },
  methods: {

  },

};
</script>

<style lang="less" scoped>
.container{
  height: 100%;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  // background-color:grey;
}

.title-text{
  font-size: 18px;
  font-weight: bold;
}

.header{
  margin-left: -30px;
}

.detail-panel{
  background-color: antiquewhite;
  margin-bottom: 20px;
}

.grid-content{
  display: flex;
  justify-content: center;
}
</style>
